'use client';

import React from 'react';
import { Divider, Flex } from 'antd';

interface CrossCardProps {
	leftTop: React.ReactNode;
	rightTop: React.ReactNode;
	leftBottom: React.ReactNode;
	rightBottom: React.ReactNode;
}

const CrossCard: React.FC<CrossCardProps> = props => {
	const { leftTop, rightTop, leftBottom, rightBottom } = props;

	return (
		<div>
			<Flex style={{ borderBottom: '1px dashed #474A68' }}>
				<div
					style={{
						paddingBottom: 20,
						paddingRight: 20,
						borderRight: '1px dashed #474A68'
					}}
				>
					{leftTop}
				</div>
				<div style={{ paddingBottom: 20, paddingLeft: 20 }}>{rightTop}</div>
			</Flex>
			<Flex>
				<div
					style={{
						paddingTop: 20,
						paddingRight: 20,
						borderRight: '1px dashed #474A68'
					}}
				>
					{leftBottom}
				</div>
				<div style={{ textAlign: 'left', paddingTop: 20, paddingLeft: 20 }}>
					{rightBottom}
				</div>
			</Flex>
		</div>
	);
};

export default CrossCard;

